<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
         <pre id="coordinates" class="coordinates" ref="coordinates"></pre>
    </div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
    data () {
        return {
         map:null,
         canvas:null,
         geojson:null
        }
    },
    mounted(){
      this.init()
    },
    methods: {
        init(){
            	this.mapbgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA';
                this.map = new this.mapbgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/streets-v11',
                    center: [0, 0],
                    zoom: 2
                });
                this.canvas = this.map.getCanvasContainer();
 
                this.geojson = {
                    'type': 'FeatureCollection',
                    'features': [
                    {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [0,0]
                        }
                        }
                    ]
               };
                this.map.on('load',()=>{
                    this.map.addSource('point', {
                        'type': 'geojson',
                        'data': this.geojson
                        });
                        
                    this.map.addLayer({
                        'id': 'point',
                        'type': 'circle',
                        'source': 'point',
                        'paint': {
                        'circle-radius': 10,
                        'circle-color': '#3887be'
                            }
                        })

                    this.map.on('mouseenter', 'point', ()=> {
                        this.map.setPaintProperty('point', 'circle-color', '#3bb2d0');
                        this.canvas.style.cursor = 'move';
                        });
                        
                    this.map.on('mouseleave', 'point', (e)=> {
                        this.map.setPaintProperty('point', 'circle-color', '#3887be');
                        this.canvas.style.cursor = '';
                        });
                        
                    this.map.on('mousedown', 'point', (e)=> {
                        
                            console.log(e)
                        // Prevent the default map drag behavior.
                        e.preventDefault();
                        this.canvas.style.cursor = 'grab';
                        
                        this.map.on('mousemove', this.onMove);
                        this.map.once('mouseup', this.onUp);
                        });
                        
                        this.map.on('touchstart', 'point', (e)=> {
                        if (e.points.length !== 1) return;
                        // Prevent the default map drag behavior.
                        e.preventDefault();
                        
                        this.map.on('touchmove', this.onMove);
                        this.map.once('touchend', this.onUp);
                        });
                   })
                },

        onMove(e) {
                var coords = e.lngLat;
                // Set a UI indicator for dragging.
                this.canvas.style.cursor = 'grabbing';
                
                // Update the Point feature in `geojson` coordinates
                // and call setData to the source layer `point` on it.
                this.geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
                this.map.getSource('point').setData(this.geojson);
        },

        onUp(e) {
                var coords = e.lngLat;
                
                // Print the coordinates of where the point had
                // finished being dragged to on the map.
                var coordinates=this.$refs.coordinates;
                coordinates.style.display = 'block';
                coordinates.innerHTML =
                'Longitude: ' + coords.lng + '<br />Latitude: ' + coords.lat;
                this.canvas.style.cursor = '';
                
                // Unbind mouse/touch events
                this.map.off('mousemove', this.onMove);
                this.map.off('touchmove', this.onMove);
        }
    }
}
</script>
<style scoped>
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
#map{
    width:100%;
    height:100%
}
.coordinates {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    bottom: 40px;
    left: 10px;
    padding: 5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
}
</style>